<template>
     <div class="photoinfo-container">
        <h3 class="title">{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间: {{ photoinfo.add_time | dateFormat }}</span>
            <span>点击: {{photoinfo.count}} 次</span>
        </p>
        <hr>
        <div class="thumbs">
            <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        </div>
        <div class="content" v-html="photoinfo.content"> 
        </div>

        
    </div>
</template>


<script>
export default {
    data(){
        return {
            id:this.$route.params.id,
            photoinfo:{},
                slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }, {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
        }
    },
    created(){
        this.getPhotoInfo();
    },
    methods:{
        getPhotoInfo(){
            this.photoinfo = {
                id : this.id,
                title : '幸福',
                add_time:'2019-03-03 12:22:23',
                count:12,
                content:'世界潮流，浩浩荡荡，顺之者昌，逆之者亡。中国开放的大门不会关闭，也不能关闭；开放的中国既造福中国人民，也造福世界人民；封闭的中国对中国人民是灾难，对世界人民同样是灾难。世界应该对中国的开放充满信心和期待，对开放的中国充满信心和期待。中国将以新的全面开放，促进新的全面改革和全面发展，中国将同世界各国人民一道努力构建人类命运共同体，把世界建设得更加美好。',

            };
        },
        handleClose () {
        console.log('close event')
         }
    }
}
</script>

<style lang="scss" scoped>
.photoinfo-container{ 
    padding: 5px;
    .title{
        text-align: center;
        font-size: 14px;
        color: rgb(11, 99, 230);
        margin:10px;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
    }

    .thumbs{
        img{
            margin: 10px;
            box-shadow: 0 0 8px #999;
        }
    }

    .content{
        font-size: 14px;
    }
}
</style>

